<template>
  <view
    :class="[
      { 'dex-home': true },
      { 'dex-home0': Sindex == 0 },
      { 'dex-home1': Sindex == 1 },
    ]"
  >
    <view v-if="Sindex != 1" :class="['dex-hab', { 'is-tab': Sindex == 1 }]">
      <view>
        <image
          style="width: 15px; height: 15px"
          src="../../static/logo.png"
          mode="aspectFit"
        ></image>
        <text>混沌</text>
      </view>
      <view>
        <text>开启你的混沌之旅</text>
        <i class="iconfont icon-sousuo"></i>
      </view>
    </view>

    <view :class="['dex-tab', { istab20: Sindex == 1 }]">
      <view>
        <text
          :class="{ 'dex-is': index == Sindex }"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tab(index)"
          >{{ item }}
        </text>
      </view>
      <text v-if="Sindex != 1" :class="{ is20: Sindex == 1 }"> 查看全部 </text>
    </view>

    <hs0 v-if="Sindex == 0" :class="[{ 'st-is': Sindex == 0 }, 'st-ss']"></hs0>
    <hs1 v-if="Sindex == 1" :class="[{ 'st-is': Sindex == 1 }, 'st-ss']"></hs1>
  </view>
</template>

<script>
import hs0 from "./page/h0";
import hs1 from "./page/h1";
export default {
  data() {
    return {
      Sindex: 0,
      Sindex2: 0,
      tabList: ["艺术IP", "商业IP"],
    };
  },
  onLoad() {},
  methods: {
    tab(index) {
      // this.Sindex = index;
      // this.Sindex2 = index;
      this.Sindex = 5;
      //延迟1秒
      setTimeout(() => {
        this.Sindex2 = index;
      }, 100);

      setTimeout(() => {
        this.Sindex = index;
      }, 200);
    },
  },
  components: {
    hs0,
    hs1,
  },
};
</script>

<style lang="scss">
.dex-home1 {
  overflow: hidden;
}
.dex-home0 {
  padding: 16px 0px 0px 30px;
}

.dex-home {
  opacity: 1;
  transition: opacity 0.4s ease;
}

text {
  font-family: PingFangSC-Regular, PingFang SC;
}
.dex-is {
  color: #1c2238 !important;
  border-bottom: #f4b062 solid 3px;
  transition: all 0.4s;
}

.is-tab {
  // 透明度
  opacity: 0;
  position: absolute;
  z-index: -999;
}

.istab20 {
  padding: 0 !important;
  justify-content: center;
  align-content: center;
  width: 100vw;
  // transform: translateX(30%) !important;
  // 过度动画
  position: absolute;
  //  position 居中
  // left: 23%;
  z-index: 50;
  transition: all 0.4s;
  margin-top: 43px;
  text {
    color: white !important;
    border-bottom-color: white !important;
  }
}

.is20 {
  opacity: 0;
  position: absolute;
  z-index: -999;
}

.dex-tab {
  display: flex;
  padding-right: 30px;
  box-sizing: border-box;
  > view:nth-child(1) {
    text {
      font-size: 18px;
      color: #b7bac1;
      font-weight: bold;
    }
    text:nth-child(1) {
      margin-right: 22px;
      font-size: 18px;
    }
  }

  > text {
    margin-left: auto;
    color: #3544c4;
  }
}

.dex-home {
  transition: all 0.45s;
}

.dex-hab {
  transition: all 0.8s;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  box-sizing: border-box;
  padding-right: 30px;
  > view:nth-child(1) {
    color: #b7bac1;
    margin-bottom: 16px;
  }

  > view:nth-child(2) {
    display: flex;
    align-items: center;
    text {
      font-weight: bold;
      font-size: 28px;
    }
    i {
      font-weight: bold;
      margin-left: auto;
      font-size: 28px;
    }
  }
}
</style>
